---
category: Level 3 — Advanced
created: '2020-04-19'
keywords: addEventListener, addRange, copy text clipboard, createRange, execCommand, getRangeAt, getSelection, rangeCount, removeAllRanges, selectNodeContents, window get selection
title: Copy highlighted code to the clipboard
---

Allowing users to copy sample code is a common thing in the web development nowadays.
To demonstrate the implementation, we create two elements:

```html
<pre id="sampleCode"><code>...</code></pre>
<button id="copyButton">Copy</button>
```

The `sampleCode` element contains the sample code which is already highlighted.

Copying the sample code to the clipboard could consist of three steps:

-   [Select](https://phuoc.ng/collection/html-dom/select-the-text-content-of-an-element/) the text content of the code element
-   [Copy](https://phuoc.ng/collection/html-dom/copy-text-to-the-clipboard/) it to the clipboard using the `document.execCommand('copy')` function
-   Last but not least, both the steps above have an effect on the text selection.

So we have to backup the current selected text before copying, and [restore it](https://phuoc.ng/collection/html-dom/save-and-restore-the-text-selection/) at the end.

You can see the code in the demo below. Enjoy!

## Demo

<Playground>
```html index.html
<div style="align-items: center; display: flex; flex-direction: column; justify-content: center; padding: 1rem">
    <div style="margin-bottom: 1rem; width: 100%">
        <pre
            id="sampleCode"
            class="language-js"
        ><code class="language-js"><span class="token comment">// Query the elements</span><br><span class="token keyword">const</span> copyButton <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'copyButton'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token keyword">const</span> codeEle <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'sampleCode'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>copyButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br>    <span class="token keyword">const</span> selection <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">getSelection</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>    <span class="token comment">// Save the current selection</span><br>    <span class="token keyword">const</span> currentRange <span class="token operator">=</span> selection<span class="token punctuation">.</span>rangeCount <span class="token operator">===</span> <span class="token number">0</span><br>        <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token operator">:</span> selection<span class="token punctuation">.</span><span class="token function">getRangeAt</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>    <span class="token comment">// Select the text content of code element</span><br>    <span class="token keyword">const</span> range <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createRange</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>    range<span class="token punctuation">.</span><span class="token function">selectNodeContents</span><span class="token punctuation">(</span>codeEle<span class="token punctuation">)</span><span class="token punctuation">;</span><br>    selection<span class="token punctuation">.</span><span class="token function">removeAllRanges</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>    selection<span class="token punctuation">.</span><span class="token function">addRange</span><span class="token punctuation">(</span>range<span class="token punctuation">)</span><span class="token punctuation">;</span><br><br>    <span class="token comment">// Copy to the clipboard</span><br>    <span class="token keyword">try</span> <span class="token punctuation">{</span><br>        document<span class="token punctuation">.</span><span class="token function">execCommand</span><span class="token punctuation">(</span><span class="token string">'copy'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>        copyButton<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'Copied'</span><span class="token punctuation">;</span><br>    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span><br>        <span class="token comment">// Unable to copy</span><br>        copyButton<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'Copy'</span><span class="token punctuation">;</span><br>    <span class="token punctuation">}</span> <span class="token keyword">finally</span> <span class="token punctuation">{</span><br>        <span class="token comment">// Restore the previous selection</span><br>        selection<span class="token punctuation">.</span><span class="token function">removeAllRanges</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>        currentRange <span class="token operator">&amp;&amp;</span> selection<span class="token punctuation">.</span><span class="token function">addRange</span><span class="token punctuation">(</span>currentRange<span class="token punctuation">)</span><span class="token punctuation">;</span><br>    <span class="token punctuation">}</span><br><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
    </div>

    <button
        id="copyButton"
        type="button"
        style="background-color: #3182ce; border: none; color: #fff; padding: 0.25rem 0.5rem"
    >
        Copy
    </button>
</div>
```

```js script.js
document.addEventListener('DOMContentLoaded', function () {
    // Query the elements
    const copyButton = document.getElementById('copyButton');
    const codeEle = document.getElementById('sampleCode');

    copyButton.addEventListener('click', function () {
        const selection = window.getSelection();

        // Save the current selection
        const currentRange = selection.rangeCount === 0 ? null : selection.getRangeAt(0);

        // Select the text content of code element
        const range = document.createRange();
        range.selectNodeContents(codeEle);
        selection.removeAllRanges();
        selection.addRange(range);

        // Copy to the clipboard
        try {
            document.execCommand('copy');
            copyButton.innerHTML = 'Copied';
        } catch (err) {
            // Unable to copy
            copyButton.innerHTML = 'Copy';
        } finally {
            // Restore the previous selection
            selection.removeAllRanges();
            currentRange && selection.addRange(currentRange);
        }
    });
});
```
</Playground>

## See also

-   [Add a special message when users copy text](https://phuoc.ng/collection/html-dom/add-a-special-message-when-users-copy-text/)
-   [Copy text to the clipboard](https://phuoc.ng/collection/html-dom/copy-text-to-the-clipboard/)
-   [Paste as plain text](https://phuoc.ng/collection/html-dom/paste-as-plain-text/)
